<template>
  <view class="diagnosis-results">
    <view class="wrapper">
      <view class="tit-wrap rbox box_y_center box_space_b">
        <text class="tit rbox">标题信息</text>
        <text class="msg rbox">已添加</text>
      </view>

      <view class="info-list cbox">
        <view class="li rbox">
          <text class="tit">标题信息</text>
          <text class="msg">标题信息</text>
        </view>
        <view class="li rbox">
          <text class="tit">标题信息</text>
          <text class="msg">标题信息</text>
        </view>
        <view class="li rbox">
          <text class="tit">标题信息</text>
          <text class="msg">标题信息</text>
        </view>
        <view class="li rbox">
          <text class="tit">标题信息</text>
          <text class="msg">标题信息</text>
        </view>
        <view class="li rbox">
          <text class="tit">标题信息</text>
          <text class="msg">标题信息</text>
        </view>
        <view class="li rbox box_y_start">
          <text class="tit">标题信息</text>
          <text class="msg"
            >霜霉病指的是由真菌中的霜霉菌引起的植物病害。霜霉菌是专性寄生菌，极少数的霜霉菌已可人工培养，如引起谷子
            白发病的禾生指梗霉
          </text>
        </view>
        <view class="li rbox box_y_start">
          <text class="tit">标题信息</text>
          <view class="pic-wrap rbox_wrap">
            <view class="img-wrap"></view>
            <view class="img-wrap"></view>
          </view>
        </view>
        <view class="li rbox box_x_center">
          <view class="btn rbox box_center">添加说明</view>
        </view>
        <view class="li cbox">
          <text class="name">您的诊断回复：</text>
          <text class="desc"
            >霜霉病指的是由真菌中的霜霉菌引起的植物病害。霜霉菌是专性寄生菌，极少数的霜霉菌已可人工培养，如引起谷子白发病</text
          >
          <text class="date box_self_end">2020-10-10 10:23:29</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.diagnosis-results {
  padding: 0 42rpx;
  .wrapper {
    padding: 28rpx 34rpx;
    margin-top: 24rpx;
    min-height: 1240rpx;
    background: #ffffff;
    box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
    border-radius: 30rpx;
    .tit-wrap {
      padding-bottom: 28rpx;
      border-bottom: 1rpx solid #e9e8e8;
      .tit {
        font-size: 34rpx;
        line-height: 1;
        color: #5a5a5a;
      }
      .msg {
        font-size: 34rpx;
        line-height: 1;
        color: #1de1c3;
      }
    }
  }
  .info-list {
    margin-top: 30rpx;
    .li {
      margin-bottom: 30rpx;
      .tit {
        min-width: 6em;
        font-size: 26rpx;
        line-height: 1.4;
        color: #b5b5b5;
      }
      .msg {
        margin-left: 8rpx;
        font-size: 26rpx;
        line-height: 1.4;
        color: #5a5a5a;
      }
      .pic-wrap {
        margin-left: 10rpx;
        .img-wrap {
          margin-right: 20rpx;
          width: 178rpx;
          height: 156rpx;
          background-color: #e9c2c2;
        }
      }
      .btn {
        width: 160rpx;
        height: 56rpx;
        font-size: 28rpx;
        line-height: 1;
        color: #fff;
        background: #1de1c3;
        border-radius: 34rpx;
      }
      .name {
        font-size: 34rpx;
        line-height: 1;
        font-weight: 600;
      }
      .desc {
        margin-top: 20rpx;
        font-size: 28rpx;
        line-height: 1.5;
        color: #9e9e9e;
      }
      .date {
        margin-top: 20rpx;
        font-size: 26rpx;
        color: #5a5a5a;
      }
    }
  }
}
</style>
